<style lang="scss" scoped>
</style>

<template>
  <el-dialog v-model="visible" title="修改密码" :width="500" @close="handleClose">
    <div class="modal_content">
      <el-form :model="handleForm" ref="formRef" label-width="100" :rules="blankRules" :disabled="isDisabled">
        <el-form-item label="旧密码：" prop="password">
          <el-input class="all_width" clearable v-model="handleForm.password"  placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input class="all_width" clearable v-model="handleForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="againPassword">
          <el-input class="all_width" clearable v-model="handleForm.againPassword" placeholder="请确认密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="modal-btn-list">
        <div></div>
        <div>
          <el-button @click="handleClose">取消</el-button>
          <el-button  :loading="loading" type="primary"  @click="submitForm(formRef)">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineEmits } from "vue";
import {postLoginUpdatePassword} from "@/api/user.js"
const emit = defineEmits(["ok"]);

let handleForm = reactive({
  password: "",
  newPassword: "",
  againPassword: "",
  userId:"",
});
const blankRules = reactive({
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  againPassword: [{ required: true, message: "请确认密码", trigger: "blur" }],
  password:[{ required: true, message: "请输入密码", trigger: "blur" }],
});

const formRef = ref();
const visible = ref(false);
const loading = ref(false);
// 控制是否禁用
const isDisabled = ref(false);
const message = inject('message')


// 打开

const getParent = (type) => {
  isDisabled.value = false;
  visible.value = true;
  // 根据操作是“添加”还是“编辑”设置对话框标题

};

// 关闭
const handleClose = () => {

  formRef.value.resetFields();
  visible.value = false;
};

const submitForm = async (form) => {
  try {
    const userID = localStorage.getItem("userId");
    handleForm.userId = userID;
    await form.validate();
    await postLoginUpdatePassword(handleForm);
    handleClose();
    console.log('表单验证通过，接口调用成功');
    emit("ok");
    message.notify('success','修改成功')
  } catch (error) {
    console.error('表单验证失败或接口调用失败', error);
  }
};

defineExpose({
  getParent,
});
</script>